<script lang="ts" setup>
const emit = defineEmits(['open']);
const openCartPopup = () => {
  emit('open');
};
const toPay = () => {
//跳转确认订单页面
  uni.navigateTo({
    url: '/pages/order/confirm',
  })
}

const props = defineProps({
  cartTotal: {
    type: Number,
    default: 0,
  },
  totalPrice: {
    type: Number,
    default: 0,
  }
})

</script>
<template>
<view class="cart-box">
  <view class="mark">					
    <uni-icons
      type="cart-filled"
      color="#f0ad4e"
      size="50"
      class="cart-img"
      @tap="openCartPopup"
    ></uni-icons>
    <view class="tag">{{ cartTotal }}</view>
  </view>
  <view class="price">
    <u-text :text="'￥' + totalPrice" margin="10rpx 20rpx"></u-text>
  </view>
  <view   class="pay-btn"> 
    <u-button
      type="warning"
      @tap="toPay"
      :disabled="cartTotal === 0"
    >
      去结算
    </u-button>
  </view>
</view>
</template>

<style lang="scss" scoped>
.cart-box {
  position: fixed;
  bottom: 100rpx;
  left: 30rpx;
  right: 30rpx;
  height: 96rpx;
  z-index: 10002200;
  border-radius: 48rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cart-img {
    width: 96rpx;
    height: 96rpx;
    position: relative;
    margin-top: -48rpx;
  }

  .pay-btn {
    max-width: 200rpx;
    height: 100%;
    padding: 0 30rpx;
    color: #ffffff;
    border-radius: 0 50rpx 50rpx 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //	font-size: $font-size-base;
  }

  .mark {
    padding-left: 46rpx;
    margin-right: 30rpx;
    position: relative;

    .tag {
      background-color: $uni-color-warning;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      //	font-size: $font-size-sm;
      position: absolute;
      right: -10rpx;
      top: -20rpx;
      border-radius: 100%;
      padding: 4rpx;
      width: 40rpx;
      height: 40rpx;
      opacity: 0.9;
    }
  }

  .price {
    flex: 1;
    //color: $text-color-base;
  }
}

</style>